<extend name="./base"/>
<block name="main">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <!--gritter notification start-->
            <section class="panel">
                <header class="panel-heading">
                    个人档
                                    <span class="tools pull-right">
                                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                                        <a href="javascript:;" class="fa fa-times"></a>
                                    </span>
                </header>
               <!--  <div class="panel-body">
                    <div class="col-md-2">
                        <div class="panel">
                                <div class="col-md-4 text-center">
                                    <a href="{:U('Xiangce/index',array('user_id'=>$userData['id']))}"><h3>{$photoNum}</h3>
                                    <p>照片</p></a>
                                </div>
                                <div class="col-md-4 text-center">
                                    <a href="{:U('Say/index',array('user_id'=>$userData['id']))}"><h3>{$sayNum}</h3>
                                    <p>说说</p></a>
                                </div>
                                <div class="col-md-4 text-center">
                                    <a href="{:U('Log/index',array('user_id'=>$userData['id']))}"><h3>{$logNum}</h3>
                                    <p>日志</p></a>
                                </div>
                        </div>
                    </div> -->
                    <div class="col-md-10">

                        <section class="panel">
                            <header class="panel-heading custom-tab ">
                                <ul class="nav nav-tabs">
                                    <li class="active">
                                        <a data-toggle="tab" href="#home">个人资料</a>
                                    </li>
                                    <?php if($isMy):?>
                                    <li class="">
                                        <a data-toggle="tab" href="#editpasswd">修改密码</a>
                                    </li>
                                    <button class="btn btn-success pull-right edit-gerendang" type="button" style="margin-top: 10px;">编辑</button>
                                    <?php endif;?>
                                </ul>
                            </header>
                            <div class="panel-body">
                                <div class="tab-content">
                                    <div id="home" class="tab-pane active">
                                        <form>
                                        <ul class="p-info">
                                            <li>
                                                <div class="title">昵称</div>
                                                <div class="desk" name="nickname" val="{$data['nickname']}">{$data['nickname']}</div>
                                            </li>
                                            <li>
                                                <div class="title">现居地</div>
                                                <div class="desk" name="residence" val="{$data['residence']}">{$data['residence']}</div>
                                            </li>
                                            <li>
                                                <div class="title">故乡</div>
                                                <div class="desk" name="hometown" val="{$data['hometown']}">{$data['hometown']}</div>
                                            </li>
                                            <li>
                                                <div class="title">空间名称</div>
                                                <div class="desk" name="zonename" val="{$data['zonename']}">{$data['zonename']}</div>
                                            </li>
                                            <li>
                                                <div class="title">空间描述</div>
                                                <div class="desk" name="zonedescribe" val="{$data['zonedescribe']}">{$data['zonedescribe']}</div>
                                            </li>
                                        </ul>
                                        </form>
                                    </div>
                                    <div id="editpasswd" class="tab-pane">
                                        <div class="panel-body col-md-8">
                                            <form role="form" class="form-horizontal">
                                                <div class="form-group">
                                                    <label class="col-lg-3 col-sm-3 control-label" for="inputPassword1">请输入旧密码：</label>
                                                    <div class="col-lg-7">
                                                        <input name="oldpasswd" type="password" placeholder="旧密码" id="inputPassword1" class="form-control">
                                                        <!--<p class="help-block">Example block-level help text here.</p>-->
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-lg-3 col-sm-3 control-label" for="inputPassword2">请输入新密码：</label>
                                                    <div class="col-lg-7">
                                                        <input name="passwd" type="password" placeholder="新密码" id="inputPassword2" class="form-control">
                                                        <!--<p class="help-block">Example block-level help text here.</p>-->
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-lg-3 col-sm-3 control-label" for="inputPassword3">再次输入新密码：</label>
                                                    <div class="col-lg-7">
                                                        <input name="repasswd" type="password" placeholder="确认新密码" id="inputPassword3" class="form-control">
                                                        <!--<p class="help-block">Example block-level help text here.</p>-->
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="col-lg-offset-2 col-lg-10">
                                                        <button class="btn btn-primary change-passwd">修改</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                    </div>
                </div>
            </section>
            <!--gritter notification end-->
        </div>
    </div>


</block>
<block name="script">

    <!-- 此处引入jQuery -->

    <script type="text/javascript">
        $('.edit-gerendang').click(function () {
            if($('.save').length>0)
            {
                return false;
            }
            $('.p-info').append('<li><button type="button" class="save btn btn-primary" onclick="save(this);">保存</button><button style="margin-left:10px;" type="button" class="btn btn-info" onclick="cancel(this);">取消</button></li>');
            //除了创建保存取消按钮外，再创建输入框
            for(var i=0;i<$('.p-info .desk').length;i++)
            {
                var val = $('.p-info .desk').eq(i).attr('val');
                $('.p-info .desk').eq(i).html('<input name="'+$('.p-info .desk').eq(i).attr('name')+'" value="'+val+'"/>');
//                console.log($('#home form').serialize());
            }
        });
        function save(obj)
        {
            $.ajax({
                type: 'post',
                url: "{:U('Gerendang/updateGerendang',array('user_id'=>$myUserData['id']))}",
                data: $('#home form').serialize(),
                success: function (data) {
                    if (data.status == 0) {
                        //清空输入框
                        for(var i=0;i<$('.p-info .desk').length;i++)
                        {
                            var val = $('.p-info .desk:eq('+i+') input').val();
                            $('.p-info .desk').eq(i).html(val);
                            $('.p-info .desk').eq(i).attr('val',val);
                        }
                        $(obj).parent().remove();
                    }
                    alert(data.message);
                }

            });
        }
        function cancel(obj)
        {
            for(var i=0;i<$('.p-info .desk').length;i++)
            {
                $('.p-info .desk').eq(i).html($('.p-info .desk').eq(i).attr('val'));
            }
            $(obj).parent().remove();
        }
        $('.change-passwd').click(function () {
            if($('.form-horizontal input:eq(0)').val()=='' || $('.form-horizontal input:eq(1)').val()=='' || $('.form-horizontal input:eq(2)').val()=='')
            {
                alert('请把表单填写完整再修改密码！');
                return false;
            }
            $.ajax({
                type: 'post',
                url: "{:U('Gerendang/updatePasswd',array('user_id'=>$myUserData['id']))}",
                data: $('.form-horizontal').serialize(),
                success: function (data) {
                    alert(data.message);
                    if (data.status == 0) {
                        window.location.href = '{:U("User/loginOut")}';
                    }
                }

            });
            return false;
        });
    </script>
</block>
